<!DOCTYPE html>
<script src="../../../resources/check-layout.js"></script>
<style>
    body { margin:8px; font-size:16px; }
</style>
<p>Given a float followed by a regular block with the same height as the float, then a block B with
    a negative margin, followed by a block with with overflow:hidden. Check that the
    overflow:hidden block doesn't overlap with the float, and also that it takes up all available
    space (but not more) beside the float. There's an empty collapse-through block before B, so
    that our initial logical top estimate fails and we have to relayout. When laying out again, we
    have to detect that the float that we first thought didn't affect the overflow:hidden block now
    affects it.</p>
<p>Below there should be an olive square to the left of a navy square. The navy square should be
    slightly larger than the olive one, and there should be spacing between them. They should not
    overlap.</p>
<div style="width:18em;">
    <div>
        <div style="float:left; width:8em; height:8em; margin-right:1em; background:olive;"></div>
        <div style="height:8em;"></div>
        <div>
            <!-- Here's an empty block that we can just collapse through, but we don't realize that
                 when calculating our initial top estimate on its parent, so we have to relayout
                 when it turns out that a negative margin has pulled us upwards (and suddenly we
                 have something block-level that's affected by the float). -->
            <div></div>

            <div style="margin-top:-8em;"></div>

            <!-- Here's a block-level element that is affected by floats, because it's a table. We
                 could have used e.g. an overflow:hidden DIV for the same effect. -->
            <div id="bfc" style="overflow:hidden; height:9em; background:navy;" data-total-x="152" data-expected-width="144"></div>
        </div>
    </div>
</div>
<p id="result" style="clear:both;"></p>
<script>
    checkLayout("#bfc", document.getElementById("result"));
</script>
